<template>
  <div>
    <div class="r">
      <div class="r_left" style="float: left">
        <div class="hs">
          <!-- <h3
            :class="blogsIsLike ? 'activ1' : 'activ2'"
            @click="giveALike"
            style=""
            class="el-icon-star-off"
          ></h3> -->
          <h3 style="display: inline-block; margin-left: 20px">
            {{ offices.officeName }}
          </h3>
        </div>
        <div class="corpus">
          {{ offices.corpus }}
        </div>
      </div>

      <div style="float: left" class="r_right">
        <el-row>
          <el-col v-if="userStatus == '1' || userStatus == '2'">
            <AddItemVue></AddItemVue>
          </el-col>
        </el-row>
        <el-table
          :data="officeItemList"
          border
          stripe
          :cell-style="{ 'text-align': 'center' }"
          :header-cell-style="{
            background: '#e2d2d2',
            textAlign: 'center',
            height: '30px',
            color: '#000000',
          }"
        >
          <el-table-column
            label="主体"
            width="190px"
            prop="subject"
          ></el-table-column>
          <el-table-column
            label="联系"
            width="120px"
            prop="relation"
          ></el-table-column>
          <el-table-column label="客体" prop="object"></el-table-column>
          <el-table-column
            label="操作"
            v-if="userStatus == '1' || userStatus == '2'"
          >
            <template slot-scope="scope">
              <div style="display: inline-block">
                <EditItemVue
                  v-if="scope.row.id"
                  :itemId="scope.row.id"
                  :isFixed="true"
                  :isRelation="true"
                ></EditItemVue>
              </div>

              <el-button
                disabled
                style="margin-left: 10px"
                type="danger"
                icon="el-icon-delete"
                size="mini"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="dj"></div>
        <el-table
          v-show="allOfficeItemList != ''"
          :data="allOfficeItemList"
          width="690px"
          border
          stripe
          :show-header="false"
          :cell-style="{ 'text-align': 'center' }"
        >
          <!-- 索引列 -->
          <!-- <el-table-column type="index" label="索引"></el-table-column> -->
          <el-table-column prop="subject" width="190px"></el-table-column>
          <el-table-column prop="relation" width="120px"></el-table-column>
          <el-table-column prop="object"></el-table-column>
          <el-table-column v-if="userStatus == '1' || userStatus == '2'">
            <template slot-scope="scope">
              <div style="display: inline-block">
                <EditItemVue
                  @change="initChart(document.getElementById('main'))"
                  v-if="scope.row.id"
                  :isFixed="false"
                  :itemId="scope.row.id"
                  :isRelation="false"
                ></EditItemVue>
              </div>

              <el-popconfirm
                style="margin-left: 10px"
                title="这是一段内容确定删除吗？"
                @confirm="removeRoleById(scope.row.id)"
              >
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  size="mini"
                  slot="reference"
                  >删除</el-button
                >
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-card style="margin: 60px">
      <!-- <div class="headerTitle">基于岳麓书院的知识图谱整理</div> -->
      <div id="main" style="width: 100%; height: 400px"></div
    ></el-card>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import requests from '@/api/ajax';
import * as echarts from 'echarts';
import AddItemVue from '@/views/ProfileView2/AddItem.vue';
import EditItemVue from '@/views/ProfileView2/EditItem.vue';
import { reqOfficeIsLike } from '@/api';

export default {
  data() {
    return {
      blogsIsLike: false,
      showOperation: false,

      option: {
        backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [
          {
            offset: 0,
            color: '#f7f8fa',
          },
          {
            offset: 1,
            color: '#cdd0d5',
          },
        ]),

        color: '#ee6666',
        // '#91cc75',
        // '#fac858',
        // '#5470c6',
        // '#73c0de',
        // '#3ba272',
        // '#fc8452',
        // '#9a60b4',
        // '#ea7ccc',
        // 提示框配置
        tooltip: {},

        legend: [
          {
            //图例
            formatter: (name) => {
              return echarts.format.truncateText(
                name,
                40,
                '14px Microsoft Yahei',
                '…'
              );
            },
            tooltip: {
              show: true,
            },
            selectedMode: 'false',
            bottom: 20,
            data: [],
          },
        ],
        toolbox: {
          show: true, //是否显示右上角工具箱
          feature: {
            // dataView: { show: true, readOnly: true },
            // restore: { show: true }, // 还原，复位原始图
            saveAsImage: { show: true }, // 保存为图片，
          },
        },
        animationDuration: 3000,
        animationEasingUpdate: 'quinticInOut',
        series: [
          {
            type: 'graph',
            // name: 'China',
            // legendHoverLink: true,
            legendHoverLink: true, // 是否启用图例 hover(悬停) 时的联动高亮。
            // hoverAnimation: false, // 是否开启鼠标悬停节点的显示动画

            layout: 'force', //力导向图

            force: {
              repulsion: 5000,
            },

            focusNodeAdjacency: true,
            roam: true, //是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
            draggable: true, //节点是否可拖拽，只在使用力引导布局的时候有用。

            // 边两端的标记类型 默认不显示标记，常见的可以设置为箭头，如下：edgeSymbol: ['circle', 'provinceow']
            edgeSymbol: ['', 'provinceow'],

            // 边两端的标记大小，可以是一个数组分别指定两端，也可以是单个统一指定。
            edgeSymbolSize: [4, 8],

            // cursor: 'pointer',
            label: {
              show: true, // 图形上的文本标签， 可用于说明图形的一些数据信息， 比如值， 名称等
              // fontStyle: 'oblique',

              // position: 'inside',
              // formatter: '{b}',
              // position: "top",
              fontSize: 11,
              color: '#000', //如果设置为 'inherit'，则为视觉映射得到的颜色，如系列色。
              // width: 100,
              overflow: 'break', //文字超出宽度是否截断或者换行。配置width时有效
            },

            lineStyle: {
              color: 'source',
              width: 2,
              curveness: 0,
              type: 'solid',
              // curveness: 0.4, //关系线的曲度，支持从 0 到 1 的值，值越大曲度越大。
            },

            // 边上的提示文字
            edgeLabel: {
              normal: {
                show: true,
                textStyle: {
                  fontSize: 10,
                },
                formatter(x) {
                  if (x.data.value) return x.data.value;
                  else return '';
                },
              },
            },

            data: [],
            links: [],
          },
        ],
      },
      // itemList: [],
    };
  },
  components: { AddItemVue, EditItemVue },
  computed: {
    ...mapState({
      offices: (state) => {
        return state.profile.offices;
      },
      officeItemList: (state) => {
        return state.profile.officeItemList;
      },
      allOfficeItemList: (state) => {
        return state.profile.allOfficeItemList;
      },
      userStatus: (state) => {
        return state.login.status;
      },
      points: (state) => {
        return state.myChart.data;
      },
      links: (state) => {
        return state.myChart.links;
      },
    }),
  },
  created() {
    this.$store.dispatch('getOfficePoint', this.$route.query.id);
    this.$store.dispatch('getOfficeLink', this.$route.query.id);
    console.log('---------------------' + this.allOfficeItemList);
  },
  mounted() {
    this.$store.dispatch('getOffices', this.$route.query.id);
    this.$store.dispatch('getOfficeItemList', this.$route.query.id);
    this.$store.dispatch('getAllOfficeItemList', this.$route.query.id);

    // this.$store.dispatch('getAcademyPoint', this.$route.query.id);
    // this.$store.dispatch('getAcademyLink', this.$route.query.id);
    this.initChart(document.getElementById('main'));
    this.getCollect();
    // reqAcademyIsLike;
  },

  // 监听器监听路由参数变化
  watch: {
    $route(to, from) {
      this.getCollect();
      this.$store.dispatch('getOffices', this.$route.query.id);
      this.$store.dispatch('getOfficeItemList', this.$route.query.id);
      this.$store.dispatch('getAllOfficeItemList', this.$route.query.id);

      this.initChart(document.getElementById('main'));
    },
    points() {
      // immediate: true, //初始化时让handler调用一下
      //handler什么时候调用？当isHot发生改变时。

      console.log('points被修改了');
      this.option.series[0].data = this.points;
      var myChart = this.$echarts.init(document.getElementById('main'));
      myChart.setOption(this.option);

      // this.initChart(document.getElementById('main'));
    },
    links() {
      // immediate: true, //初始化时让handler调用一下

      console.log('links被修改了');

      this.option.series[0].links = this.links;
      var myChart = this.$echarts.init(document.getElementById('main'));
      myChart.setOption(this.option);
      // this.initChart(document.getElementById('main'));
    },
  },

  methods: {
    async initChart(domName) {
      console.log('11111');
      await this.$store.dispatch('getOfficePoint', this.$route.query.id);
      await this.$store.dispatch('getOfficeLink', this.$route.query.id);
      var myChart = this.$echarts.init(domName);
      // 图表自适应
      console.log(this.points);
      this.option.series[0].data = this.points;
      this.option.series[0].links = this.links;

      // let result = await reqAcademyPoint(this.$route.query.id);
      // let res = result.data;
      // console.log(res);
      // this.option.series[0].data = res;

      // let result1 = await reqAcademyLink(this.$route.query.id);
      // let res1 = result1.data;
      // this.option.series[0].links = res1;
      this.option && myChart.setOption(this.option);
    },

    async getCollect() {
      let likeResult = await reqOfficeIsLike(this.$route.query.id);
      this.blogsIsLike = likeResult.data;
    },
    giveALike() {
      if (this.userStatus !== '') {
        requests
          .put('/collects/offices/change', {
            officeId: this.$route.query.id,
            flag: this.blogsIsLike,
          })
          .then((res) => {
            this.blogsIsLike = !this.blogsIsLike;
            if (res.code == 1) {
              this.$notify.success(res.data);
            } else {
              this.$notify.error(res.data);
            }
          });
      } else {
        this.$confirm('此操作需要先登录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            this.$router.push('/login');
          })
          .catch(() => {});
      }
    },
    removeRoleById(id) {
      requests.delete('/changes/' + id).then((res) => {
        if (res.code == 1) {
          this.$notify.success('删除成功');
          this.$store.dispatch('getOfficePoint', this.$route.query.id);
          this.$store.dispatch('getOfficeLink', this.$route.query.id);
          this.$store.dispatch('getallOfficeItemList', this.$route.query.id);
        } else {
          this.$notify.error(res.msg);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.hs {
  // position: relative;
  margin-top: 60px;
  margin-left: 80px;
}
.corpus {
  width: 350px;
}
.r_left {
  // margin-left: 80px;
  margin-right: 80px;
}
.activ1 {
  color: rgb(202, 4, 4);
  cursor: pointer;
}
.activ2 {
  color: rgb(10, 1, 1);
  cursor: pointer;
}

.r {
  overflow: hidden;
  // width: 88%;
  width: 1130px;
  // text-align: center;
  margin: 0 auto;
}
.r_right {
  margin-top: 60px;
}
.dj {
  height: 10px;
  width: 690px;
  background-color: #fff;
}
</style>
